<template>
<div class="order-search">
  <el-form ref="searchForm" :model="params">
    <el-input v-model="params.q" placeholder="订单编号" class="elinput"></el-input>
    <el-select v-model="params.customer_service_id" clearable filterable placeholder="测量人员" @change="setCustomerMaster">
      <el-option v-for="item in masters" :key="item.id" :label="item.real_name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="params.facilitator_id" clearable filterable placeholder="安装人员" @change="setFacilitatorMaster">
      <el-option v-for="item in masters" :key="item.real_name" :label="item.real_name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="params.company_id" clearable filterable placeholder="请选择品牌" @change="setCompany">
      <el-option v-for="item in companies" :key="item.real_name" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-date-picker v-model="searchTimeRange" type="daterange" align="right" placeholder="选择日期范围"></el-date-picker>
    <el-button type="primary" icon="search" @click="setOrders">查询</el-button>
    <el-button type="primary" icon="upload2" @click="_handleExport" :loading="downloadLoading">导出</el-button>
    <el-button type="primary" icon="delete2" @click="resetForm">清空</el-button>
  </el-form>
</div>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'

export default {
  data: () => ({
    searchTimeRange: '',
    downloadLoading: false
  }),
  computed: {
    ...mapGetters('orders', [
      'orders',
      'params',
      'masters',
      'companies'
    ])
  },
  methods: {
    ...mapActions('orders', [
      'updateParams',
      'setCustomerMaster',
      'setFacilitatorMaster',
      'setCompany',
      'setOrders'
    ]),
    resetForm() {
      this.updateParams({
        customer_service_id: null,
        facilitator_id: null,
        company_id: null,
        start_time: null,
        end_time: null
      })
      this.searchTimeRange = ''
    },
    _handleExport() {
      this.downloadLoading = true
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../../../vendor/Export2Excel')
        const tHeader = ['序号', '材料', '品牌', '测量师傅']
        const filterVal = ['id', 'material', 'company_name', 'name']
        const orders = this.orders
        const data = this.formatJson(filterVal, orders)
				// console.log(data)
        export_json_to_excel(tHeader, data, '列表excel')
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
				if (v[j] === null || v[j] === 'undefined') {
					return ''
				} else {
					return v[j]
				}
      }))
    }
  },
  watch: {
    searchTimeRange: function(val, oldVal) {
      let start_time, end_time
      if (val[0] && val[1]) {
        start_time = Date.parse(new Date(val[0])) / 1000
        end_time = Date.parse(new Date(val[1])) / 1000
      } else {
        start_time = null
        end_time = null
      }
      this.updateParams({
        start_time: start_time,
        end_time: end_time
      })
    }
  }
}
</script>
